<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互</title>
		<!-- 导入js函数类库 -->
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(function(){
				// alert("页面加载完成")
				//要求从后端获取数据
				/**
				 * data参数两种传递方式
				 * 1.对象方式实现数据传参   date:{id:100,name:"tom"}
				 * 		语法：{key:value,key2:value2}
				 * 2.拼接字符串的方式   data:"id=100&name=tom&age=18"
				 * 		语法：key1=value&key2=value2
				 */
				$.ajax({
					type:"get",
					url:"http://localhost:8099/findAll",
					// date:{id:100,name:"tom"}
					
					success:function(data){
						/* //普通for循环
						for(var i=0;i<data.length;i++){
							console.log(data[i])
						} */
						/* //JS原生函数 in 的关键字遍历的是下标
						for(index in data){
							console.log(data[index])
							} */
						//JS原生函数 of 的关键字遍历的是对象
						for(user of data){
							/* let id =user.id
							let name =user.name
							let age =user.age
							let sex =user.sex */
						
							// let tr ="<tr><td>"+id+"</td><td>"name"</td></tr>"
							let tr=`
								<tr>
									<td>${user.id}</td>
									<td>${user.name}</td>
									<td>${user.age}</td>
									<td>${user.sex}</td>
								</tr>
									`
							//append将指定的元素追加到tab1
							$("#tab1").append(tr)	
						}
					}
				})
			})
		</script>
	</head>
	<body>
		<!-- 需要准备表格，展现user数据 -->
		<table id="tab1" border="1px" width="40%" align="center" cellspacing="0">
			<tr align="center" height="60px">
				<th colspan="5"><h1>用户列表</h1></th>
			</tr>
			<tr align="center" height="60px">
				<th>编号</th>
				<th>名称</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
		
		</table>
	</body>
</html>
